<!DOCTYPE html>
<html lang="en">

<head>
  @@include('./meta.html',{})
</head>

<body class="app-component">
  @@include('./header.html',{
  "components": "active"
  })
  <div class="component-wrapper">
    <div class="component-navleft">
      @@include('./navleft.html',{
      "tab_form": "active"
      })
    </div><!-- component-navleft -->

    <div class="component-sidebar">
      @@include('./sidebar.html',{
      "tab_form": "active",
      "form_input_group": "active",
      "urlPrefix": "."
      })
    </div><!-- component-sidebar -->

      <div class="component-content">
        <div class="component-content-header">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-style1 mg-b-0">
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item"><a href="#">Forms</a></li>
              <li class="breadcrumb-item active" aria-current="page">Input Group</li>
            </ol>
          </nav>
          <a href="javascript:;" id="componentOptions" class="text-secondary mg-l-auto d-xl-none"><i data-feather="more-horizontal"></i></a>
        </div><!-- component-content-header -->

        <div class="component-content-body" data-spy="scroll" data-target="#navSection" data-offset="120">
          <div class="content content-components">
            <div class="container">
              <!--sd-->
              <h1 class="tx-36 mg-b-20 mg-lg-b-25">Input Group</h1>
        <p class="td-lead">Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.</p>

        <hr class="mg-y-40">

        <h4 id="section1" class="mg-b-10">Basic Example</h4>
        <p class="mg-b-30">Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group mg-b-10">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon1">@</span>
            </div>
            <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
          </div>

          <div class="input-group mg-b-10">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
              <span class="input-group-text" id="basic-addon2">@example.com</span>
            </div>
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <div class="input-group-append">
              <span class="input-group-text">.00</span>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group mg-b-10&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot; id=&quot;basic-addon1&quot;&gt;@&lt;/span&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Username&quot; aria-label=&quot;Username&quot; aria-describedby=&quot;basic-addon1&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group mg-b-10&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Recipient&apos;s username&quot; aria-label=&quot;Recipient&apos;s username&quot; aria-describedby=&quot;basic-addon2&quot;&gt;
  &lt;div class=&quot;input-group-append&quot;&gt;
    &lt;span class=&quot;input-group-text&quot; id=&quot;basic-addon2&quot;&gt;@example.com&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Amount (to the nearest dollar)&quot;&gt;
  &lt;div class=&quot;input-group-append&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;.00&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section2" class="mg-b-10">Checkboxes and Radios</h4>
        <p class="mg-b-30">Place any checkbox or radio option within an input group’s addon instead of text.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group mg-b-10">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <div class="custom-control custom-checkbox pd-l-15">
                  <input type="checkbox" class="custom-control-input" id="customCheck1">
                  <label class="custom-control-label" for="customCheck1"></label>
                </div>
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with checkbox">
          </div>

          <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <div class="custom-control custom-radio pd-l-15">
                  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
                  <label class="custom-control-label" for="customRadio1"></label>
                </div>
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with radio button">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;div class=&quot;input-group-text&quot;&gt;
      &lt;div class=&quot;custom-control custom-checkbox pd-l-15&quot;&gt;
        &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; id=&quot;customCheck1&quot;&gt;
        &lt;label class=&quot;custom-control-label&quot; for=&quot;customCheck1&quot;&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Text input with checkbox&quot;&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section3" class="mg-b-10">Multiple Inputs</h4>
        <p class="mg-b-30">While multiple inputs are supported visually, validation styles are only available for input groups with a single input.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text">Fullname</span>
            </div>
            <input type="text" aria-label="First name" class="form-control" placeholder="Firstname">
            <input type="text" aria-label="Last name" class="form-control" placeholder="Lastname">
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;Fullname&lt;/span&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; aria-label=&quot;First name&quot; class=&quot;form-control&quot; placeholder=&quot;Firstname&quot;&gt;
  &lt;input type=&quot;text&quot; aria-label=&quot;Last name&quot; class=&quot;form-control&quot; placeholder=&quot;Lastname&quot;&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section4" class="mg-b-10">Multiple Addons</h4>
        <p class="mg-b-30">Multiple add-ons are supported and can be mixed with checkbox and radio input versions.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group mg-b-10">
            <div class="input-group-prepend">
              <span class="input-group-text">$</span>
              <span class="input-group-text">0.00</span>
            </div>
            <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
            <div class="input-group-append">
              <span class="input-group-text">$</span>
              <span class="input-group-text">0.00</span>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;0.00&lt;/span&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Dollar amount (with dot and two decimal places)&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Dollar amount (with dot and two decimal places)&quot;&gt;
  &lt;div class=&quot;input-group-append&quot;&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;$&lt;/span&gt;
    &lt;span class=&quot;input-group-text&quot;&gt;0.00&lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section5" class="mg-b-10">Button Addons</h4>
        <p class="mg-b-30">Place any buttons within an input group’s addon.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group mg-b-10">
            <div class="input-group-prepend">
              <button class="btn btn-outline-light" type="button" id="button-addon1">Button</button>
            </div>
            <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-light" type="button" id="button-addon2">Button</button>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;button class=&quot;btn btn-outline-light&quot; type=&quot;button&quot; id=&quot;button-addon1&quot;&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;&quot; aria-label=&quot;Example text with button addon&quot; aria-describedby=&quot;button-addon1&quot;&gt;
&lt;/div&gt;

&lt;div class=&quot;input-group&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Recipient&apos;s username&quot; aria-label=&quot;Recipient&apos;s username&quot; aria-describedby=&quot;button-addon2&quot;&gt;
  &lt;div class=&quot;input-group-append&quot;&gt;
    &lt;button class=&quot;btn btn-outline-light&quot; type=&quot;button&quot; id=&quot;button-addon2&quot;&gt;Button&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

        <hr class="mg-t-50 mg-b-40">

        <h4 id="section6" class="mg-b-10">Dropdown Addons</h4>
        <p class="mg-b-30">Place any dropdown within an input group’s addon.</p>

        <div data-label="Example" class="td-example demo-forms">
          <div class="input-group mg-b-10">
            <div class="input-group-prepend">
              <button class="btn btn-outline-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu tx-13">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
              </div>
            </div>
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
          </div>

          <div class="input-group">
            <input type="text" class="form-control" aria-label="Text input with dropdown button">
            <div class="input-group-append">
              <button class="btn btn-outline-light dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu tx-13">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
              </div>
            </div>
          </div>
        </div><!-- td-example -->
        <pre><code class="language-html">&lt;div class=&quot;input-group&quot;&gt;
  &lt;div class=&quot;input-group-prepend&quot;&gt;
    &lt;button class=&quot;btn btn-outline-light dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Dropdown&lt;/button&gt;
    &lt;div class=&quot;dropdown-menu tx-13&quot;&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
      &lt;div role=&quot;separator&quot; class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
      &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type=&quot;text&quot; class=&quot;form-control&quot; aria-label=&quot;Text input with dropdown button&quot;&gt;
&lt;/div&gt;</code></pre>
 
@@include('./footer.html',{})

            </div>
          </div>
        </div><!-- component-content-body -->

        <div class="component-content-sidebar section-nav">
          <label class="tx-10 tx-medium tx-spacing-1 tx-color-03 tx-uppercase tx-sans mg-b-15">On This Page</label>
          <nav id="navSection" class="nav flex-column">
            <a href="#section1" class="nav-link">Basic Example</a>
            <a href="#section2" class="nav-link">Checkboxes and Radios</a>
            <a href="#section3" class="nav-link">Multiple Inputs</a>
            <a href="#section4" class="nav-link">Multiple Addons</a>
            <a href="#section5" class="nav-link">Button Addons</a>
            <a href="#section6" class="nav-link">Dropdown Addons</a>
          </nav>
        </div><!-- component-content-sidebar -->
      </div><!-- component-content -->

    </div><!-- component-wrapper -->


    @@include('./_script.html',{})

    <script>
      $(function(){
        'use strict'
 

      });
    </script>
  </body>
</html>
